<template>
  <div class="content-table">
    <!-- <el-card> -->
    <!-- class="project-list-container" -->
    <div>
      <div class="list-h">
        <!-- <el-button type="primary" @click="handleOpen" class="add-option"
          >添加项目</el-button
        > -->
        <i></i>
        <el-form
          :inline="true"
          class="demo-form-inline"
          :model="formInline"
          ref="formRef"
          @submit.prevent
        >
          <el-form-item label="项目名称" prop="projectNameLike">
            <el-input
              v-model="formInline.projectNameLike"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目编号" prop="projectCodeLike">
            <el-input
              v-model="formInline.projectCodeLike"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目负责人" prop="projectLeaderNameLike">
            <el-input
              v-model="formInline.projectLeaderNameLike"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="createUserLike">
            <el-input
              v-model="formInline.createUserLike"
              clearable
              class="width-custom120"
            ></el-input>
          </el-form-item>
          <el-form-item label="项目类型" prop="projectTypes">
            <el-select
              v-model="formInline.projectTypes"
              multiple
              class="width-custom120"
            >
              <el-option
                id="default-option"
                v-for="item in typeList"
                :key="item.projectCode"
                :label="item.projectName"
                :value="item.projectCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
        <el-table
          :data="tableData"
          ref="tableRef"
          border
          v-adaptive="{ bottomOffset: 83 }"
          v-loading="loading"
          :height="300"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        >
          <template #empty>
            <el-empty :image-size="150" description="暂无数据"></el-empty>
          </template>
          <el-table-column type="index" label="序号" width="50">
            <template v-slot="scope">
              <span>{{
                (formInline.pageNum - 1) * formInline.pageSize +
                scope.$index +
                1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="projectCode"
            label="项目编号"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="projectName"
            label="项目名称"
            width="110"
          ></el-table-column>
          <el-table-column
            prop="projectLeaderName"
            label="项目负责人"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="projectTypeName"
            label="项目类型"
          ></el-table-column>
          <el-table-column
            prop="createUserName"
            label="创建人"
          ></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column prop="name" label="项目进度">-</el-table-column>
          <el-table-column prop="phoneNum" label="项目阶段">-</el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <!-- <el-button type="text" @click="handleDetail">查看详情</el-button> -->
              <el-button
                type="text"
                @click="handleEdit(row)"
                v-auth="`/project/manage--edit`"
                >编辑</el-button
              >

              <el-button
                type="text"
                v-auth="`/project/manage--delete`"
                v-showbtn="`${row.createUser}`"
                @click="handleOpen(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-skeleton>
    </div>
    <re-pagination
      :total="total"
      v-show="total > 0"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch"
    />
    <el-dialog
      title="编辑项目"
      v-model="dialogVisible"
      destroy-on-close
      width="680px"
      :before-close="beforeClose"
    >
      <project-view
        :projectInfo="projectInfo"
        v-model:dialogVisible="dialogVisible"
        mode="edit"
        @resetGetData="resetGetData"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {
  reactive,
  toRefs,
  ref,
  inject,
  watch,
  defineComponent,
  nextTick,
  h
} from "vue";
import RePagination from "/@/components/RePagination/index.vue";
import ProjectView from "./ProjectView.vue";
// import { successMessage, warnMessage } from "/@/utils/message";
import { postProjectMngList, postProjectDelete } from "/@/api/project";
import NotifMessage from "/@/utils/message/notification";
import { ElMessageBox } from "element-plus";
// import { useRouter } from "vue-router";
import { useProjectStoreHook } from "/@/store/modules/project";

export default defineComponent({
  name: "projectTable",
  components: {
    RePagination,
    ProjectView
  },
  setup() {
    // const router = useRouter();
    const formRef = ref<HTMLFormElement | null>(null) as any;
    const tableRef = ref<HTMLTableElement | null>(null) as any;
    const activeCategory: any = ref(inject("active"));
    let loading = ref<boolean>(false);
    let dialogVisible = ref<boolean>(false);
    let total = ref<number>(0);
    const projectHook = useProjectStoreHook();
    let projectInfo = ref(null);

    let formInline = reactive({
      projectNameLike: "",
      projectCodeLike: "",
      projectLeaderNameLike: "",
      createUserLike: "",
      projectPathLike: "",
      projectTypes: [],
      pageNum: 1,
      pageSize: 20
    });
    let state = reactive({
      tableData: []
    });

    const typeList = [
      {
        projectCode: 1,
        projectName: "默认类型"
      }
      // {
      //   projectCode: 2,
      //   projectName: "项目类型2"
      // }
    ];

    // 请求表格数据
    const getTableData = async (obj: object = {}) => {
      loading.value = true;
      try {
        const { code, data } = await postProjectMngList(obj);
        if (code === 200) {
          state.tableData = data.list;
          total.value = data.rows;
        }
      } catch (err) {
        console.log(err);
      } finally {
        loading.value = false;
      }
    };

    // const emitClose = (isSubmit: boolean) => {
    //   dialogVisible.value = false;
    //   if (isSubmit) {
    //     getTableData();
    //   }
    // };

    // 重置条件
    const handleReset = (): void => {
      formRef.value.resetFields();
      formInline.projectPathLike = "";
    };

    // 根据条件进行搜索
    const handleSearch = (): void => {
      getTableData(formInline);
    };

    // 关闭弹窗
    const beforeClose = () => {
      dialogVisible.value = false;
    };

    const resetGetData = () => {
      beforeClose();
      getTableData(formInline);
      projectHook.rightSetting();
    };

    // 编辑
    const handleEdit = (row): void => {
      dialogVisible.value = true;
      projectInfo.value = row;
    };

    // 删除
    const handleDelete = async item => {
      try {
        const { code, message } = await postProjectDelete({ id: item.id });
        if (code === 200) {
          NotifMessage.success("删除成功");
          getTableData();
          projectHook.rightSetting();
        } else {
          NotifMessage.error(`${message}`);
        }
      } catch (err) {
        console.log(err);
      }
    };

    // const handleDetail = () => {
    //   router.push("/project/manage/detail");
    // };

    // 监听左侧树的变化，发起请求
    watch(activeCategory, newVal => {
      if (newVal.id) {
        formInline.projectPathLike = newVal.projectPath;
      } else {
        formInline.projectPathLike = "";
      }
      getTableData(formInline);
    });

    // 监听左侧项目数据变化
    watch(
      () => projectHook.leftRefresh,
      newVal => {
        if (newVal) {
          getTableData(formInline);
        }
      }
    );

    // 监听右侧数据变化
    watch(
      () => projectHook.isHidden,
      () => {
        nextTick(() => {
          tableRef.value.doLayout();
        });
      }
    );

    const handleOpen = async row => {
      try {
        const res = await ElMessageBox({
          title: "提示",
          type: "warning",
          message: h("p", null, [
            h("span", null, "删除该项目后， "),
            h(
              "i",
              { style: "font-weight: bold" },
              "该项目及其子项目、所有项目关联合同数据将全部删除。"
            ),
            h("span", null, "确认删除该项目数据？")
          ]),
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        });

        if (res === "confirm") {
          handleDelete(row);
        }

        console.log(res);
      } catch (err) {
        console.log(err);
      }
    };

    // const name = inject("active");
    // console.log(name, "name");
    // 请求数据
    // onMounted(() => {
    getTableData(formInline);
    // });
    return {
      ...toRefs(state),
      projectInfo,
      total,
      // nodeId,
      tableRef,
      formRef,
      dialogVisible,
      loading,
      formInline,
      typeList,
      beforeClose,
      // handleOpen,
      handleOpen,
      handleReset,
      handleSearch,
      handleEdit,
      resetGetData,
      handleDelete
      // handleDetail,
      // emitClose,
      // formatterUserType
    };
  }
});
</script>
<style lang="scss" scoped>
.content-table {
  width: 100%;
  height: 100%;
  // padding: 10px;
  // border: 1px solid #e4e7ed;
}
.content-table :deep .el-card__body {
  height: 100%;
  width: 100%;
}

.content-table :deep .el-table__fixed-right-patch {
  background: #eef1f6;
}
</style>
